<template>

  <el-main id="root">
    <header><span class="tishi">提示：该记录只保留近一个月的操记录，请及时处理。</span></header>
    <div class="search">
      <div class="kuang">
      <span class="tjss">条件搜索：</span>
        <el-select v-model="value" filterable placeholder="--全部搜索--"  v-on:change=change>
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      <div class="block" id="date1">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions0">
        </el-date-picker>
      </div>
      <span class="demonstration" id="zhi">至</span>
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions1">
        </el-date-picker>
        <buttons btnclass="refer" id="sousuo"  btntext="搜索" @btnclick=searchtime>{{btntext}}<!--按钮-->
          <slot name="btn"></slot><!--插槽-->
        </buttons>
        <el-button  class="tk" type="text" @click="dialogVisible = true;dialogxr()" >点击查看流量折线图</el-button>
        <el-dialog
          title="折线图"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="chart" id="mychart1"> </div>
          <span slot="footer" class="dialog-footer">
    <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
    <el-button  type="primary" @click="dialogVisible = false">关闭</el-button>
  </span>
        </el-dialog>
      </div>
      </div>
    </div>

      <!--这是table的组件模块-->
      <i-table :list="list"
               @handleSelectionChange="handleSelectionChange"
               :options="options"
               :columns="columns"
               :operates="operates">
      </i-table>
    </el-main>




</template>

<script>
  import buttons from '../zys/buttons';
  import iTable from '../TX/tableComponent';
  var echarts = require('echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
//  var myChart = echarts.init(document.getElementById('mychart1'));
  export default {
    name: 'loginfor',
    data(){
      return {
//          日历
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() > Date.now() || time.getTime() > this.value2;
            } else {
              return time.getTime() > Date.now();
            }
          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            return time.getTime() < this.value1 || time.getTime() > Date.now();
          }
        },

        value1: '',
        value2: '',

//        下拉菜单
        options1: [{
          value: '选项1',
          label: '近一周'
        }, {
          value: '选项2',
          label: '近一月'
        }, {
          value: '选项3',
          label: '近一年'
        }],
        value: '',
        btntext:'搜索',
//        table引入
        // table数据传入
        list: [
//          {
////            id: '',
////            name: '',
////            logtime: '',
////            logip: ''
//          },
//          {
//            id: '201907031234',
//            name: '王小虎',
//            logtime: '2019-07-03',
//            logip: '200',
//
//          },
//          {
//            id: '201907031234',
//            name: '王小虎',
//            logtime: '2019-07-03',
//            logip: '200',
//
//          },
        ],

        // table 的参数
        options: {
          stripe: true, // 是否为斑马纹 table
          loading: false, // 是否添加表格loading加载动画
          highlightCurrentRow: true, // 是否支持当前行高亮显示
          mutiSelect: true, // 是否支持列表项选中功能
        },

        //table表头的添加与修改，需要展示的列
        columns: [
          {
            prop: 'id',
            label: '登录ID',
            align: 'center',
          },
          {
            prop: 'name',
            label: '登录名',
            align: 'center',
          },
          {
            prop: 'logtime',
            label: '登录时间',
            align: 'center',
          },
          {
            prop: 'logip',
            label: '登录IP',
            align: 'center',
          },
          ],
        // 列操作按钮
        operates: {
          width: 200,
          fixed: 'right',
          list: [
            //删除按钮
//            {
//              id: '2',
//              label: '删除',
//              type: 'danger',
//              icon: 'el-icon-delete',
//              show: true,
//              plain: false,
//              disabled: false,
//              method: (index, row) => {
//                this.handleDel(index, row)
//              }
//            }
          ]
        },
        dialogVisible: false,
        lognum:[],
      }
    },

    methods: {
      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
      },
      // 编辑
      handleEdit(index, row) {
        console.log(' index:', index)
        console.log(' row:', row)
      },
      // 删除
      handleDel(index, row) {
        console.log(' index:', index)
        console.log(' row:', row)
      },
      //关闭弹出框
      handleClose(done) {
//        this.$confirm('确认关闭？')
//          .then(_ => {
            done();
//          })
//          .catch(_ => {});
      },
      //切换选项
      change(){
//          console.log(this.value)
//        let D=new Date();
//        let m=D.getMonth();
//        let y=D.getFullYear();
//        let d=D.getDate();
//        let date=y+m+d;
          if(this.value=='选项1'){
              this.list=[];
          this.$axiosx.get('/api/backLoginforop1').then(resp=>{
            for(let i=0;i<resp.data.length;i++){
              this.list.push({id:'',name:'',logtime:'',logip:''})
              this.list[i].id=resp.data[i].login_log_id;
              this.list[i].name=resp.data[i].user_id;
              this.list[i].logtime=resp.data[i].logintime;
              this.list[i].logip=resp.data[i].login_ip;
//                JSON.stringify( this.list);
            }
          })
          }
        else if(this.value=='选项2'){
          this.list=[];
          this.$axiosx.get('/api/backLoginforop2').then(resp=>{
            for(let i=0;i<resp.data.length;i++){
              this.list.push({id:'',name:'',logtime:'',logip:''})
              this.list[i].id=resp.data[i].login_log_id;
              this.list[i].name=resp.data[i].user_id;
              this.list[i].logtime=resp.data[i].logintime;
              this.list[i].logip=resp.data[i].login_ip;
//                JSON.stringify( this.list);
            }
          })
        }
          else if(this.value=='选项3'){
            this.list=[];
            this.$axiosx.get('/api/backLoginforop3').then(resp=>{
              for(let i=0;i<resp.data.length;i++){
                this.list.push({id:'',name:'',logtime:'',logip:''})
                this.list[i].id=resp.data[i].login_log_id;
                this.list[i].name=resp.data[i].user_id;
                this.list[i].logtime=resp.data[i].logintime;
                this.list[i].logip=resp.data[i].login_ip;
//                JSON.stringify( this.list);
              }
            })
          }
      },
      searchtime(){
          console.log(this.value1);
          console.log(this.value2);
        this.list=[];
        this.$axiosx.get(`/api/backLoginforop4?value1=${this.value1}&value2=${this.value2}`).then(resp=>{
          for(let i=0;i<resp.data.length;i++){
            this.list.push({id:'',name:'',logtime:'',logip:''})
            this.list[i].id=resp.data[i].login_log_id;
            this.list[i].name=resp.data[i].user_id;
            this.list[i].logtime=resp.data[i].logintime;
            this.list[i].logip=resp.data[i].login_ip;
//                JSON.stringify( this.list);
          }
        })
      },
      dialogxr(){
          let D=new Date();
          let d=D.getDate();
          let m=D.getMonth()+1;
          let time=m+'.'+d;
          let time1=m+'.'+(d-1);
          let time2=m+'.'+(d-2);
          let time3=m+'.'+(d-3);
          let time4=m+'.'+(d-4);
          let time5=m+'.'+(d-5);
          let time6=m+'.'+(d-6);

          console.log(1111);
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('mychart1'));
          myChart.setOption({
            title:{text:'登录人员流量折线图'},
            xAxis:{
                type:'category',
              data:[time6, time5,time4,time3 , time2, time1, time]
            },
            yAxis:{
                type:'value'

            },
            series:[{
              name:'登录人数',
              type:'line',
              data:[this.lognum[0].t6, this.lognum[0].t5,this.lognum[0].t4,this.lognum[0].t3 , this.lognum[0].t2, this.lognum[0].t1, this.lognum[0].t]
            }]
          })
//          myChart.setOption({
//            title: {
//              text: 'ECharts 入门示例'
//            },
//            tooltip: {},
//            xAxis: {
//              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//            },
//            yAxis: {},
//            series: [{
//              name: '销量',
//              type: 'bar',
//              data: [5, 20, 36, 10, 10, 20]
//            }]
//          });


        })

      }





        },







    created(){
      this.$axiosx.get('/api/backLoginfor').then(resp => {
        this.list = [];

//          console.log(resp.data)
        for (let j = 0; j < resp.data.length; j++) {
          this.list.push({id: '', name: '', logtime: '', logip: ''});

          this.list[j].id = resp.data[j].login_log_id;
          this.list[j].name = resp.data[j].user_id;
          this.list[j].logtime = resp.data[j].logintime;
          this.list[j].logip = resp.data[j].login_ip;
//                JSON.stringify( this.list);
        }


      }),
      this.$axiosx.get('/api/backLognum').then(resp => {
          this.lognum=[];
//          console.log(resp.data);
          this.lognum.push(resp.data[0])
//        console.log(this.lognum[0].t)



      })
    },
    mounted(){

    },
    components: {
        buttons,
        iTable

    }

  }
</script>

<style scoped>
  /*#root::-webkit-scrollbar{*/
    /*display: none;*/
  /*}*/
  #root{
    width:100%;
    /*height: 200px;*/

  }
  header{
    font-size: 13px;
    font-family: 宋体;
    background-color: rgba(97, 134, 231, 0.88);
    width: 100%;
    height: 30px;
    line-height: 30px;
    /*padding-left: 10px;*/
    border-radius: 3px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0);
    margin: 0 auto;
  }
  .search{
    width: 100%;
    height: 65px;
    border:  1px solid rgba(167, 167, 167, 0.83);
    margin: 5px auto;
    margin-top: 5px;
    background-color: rgba(217, 217, 217, 0.89);
  }
  .tishi{
    margin-left: 10px;

   }
  .tjss{
    font-size: 12px;
    line-height: 45px;
    margin-left: 10px;
  }
  /*#tjxz{*/
    /*font-size: 14px;*/
    /*text-align: center;*/
    /*height: 40px;*/

  /*}*/
  .block{
    display: inline-block;
  }
  .kuang{
    line-height: 65px;
  }
  #date1{
    margin-left: 30px;
  }
  #zhi{
    margin-left: 10px;
    margin-right: 10px;

  }
  #sousuo{
    margin-left: 15px;
  }
  .refer{
    height:38px;
    margin-bottom: 2px;
  }
  .tk{
    margin-left: 50px;
  }
  .chart{
    width: 400px;
    height: 300px;
  }

</style>
